<div class="main-content" (window:resize)="onResize($event)" id='myDashboard' [ngClass]="{'noSidebar': display_v.panelMode }">
    <!-- ============================================================== -->
    <!-- TITLE  -->
    <!-- ============================================================== -->
    <div class="col-12" style="padding:2px"  *ngIf="!display_v.panelMode">
        <eda-dashboard-panel class="pointer" (click)="setTitle()">
            <div class="d-flex justify-title-content">
                <h3 *ngIf="!titleClick" class="eda-title"> {{title}} </h3>
                <input *ngIf="!!titleClick" (focusout)="setTitle()" (keydown.enter)="setTitle()" type="text" class="w-100" [(ngModel)]="title" pInputText autofocusOnShow>
            </div>
        </eda-dashboard-panel>
    </div>


    <!-- ============================================================== -->
    <!-- GLOBAL FILTERS  -->
    <!-- ============================================================== -->
    <app-global-filter #gFilter [dashboard]="this"></app-global-filter>

    <ngx-gridster class="dashboard-grid" [options]="gridsterOptions" [draggableOptions]="gridsterDraggableOptions" #gridster1 >
        <!-- Normal Size -->
        <ng-container *ngIf="!toLitle && !toMedium" >
            <ngx-gridster-item *ngFor="let panel of panels"  [options]="itemOptions" [dragAndDrop]="true" [resizable]="panel.resizable" [(w)]="panel.w" [(h)]="panel.h" [(x)]="panel.x" [(y)]="panel.y" (change)="itemChange($event, panel)">
                <ng-container *ngTemplateOutlet="panelTemplate; context: {$implicit: panel}"></ng-container>
            </ngx-gridster-item>
        </ng-container>

        <!-- Mid  Size -->
        <ng-container *ngIf="toMedium">
            <ngx-gridster-item *ngFor="let panel of panels" [options]="itemOptions" [dragAndDrop]="panel.dragAndDrop" [resizable]="panel.resizable" [(w)]="panel.tamanyMig.w" [(h)]="panel.tamanyMig.h" [(x)]="panel.tamanyMig.x" [(y)]="panel.tamanyMig.y" (change)="itemChange($event, panel)">
                <ng-container *ngTemplateOutlet="panelTemplate; context: {$implicit: panel}"></ng-container>
            </ngx-gridster-item>
        </ng-container>

        <!-- Mobile Size -->
        <ng-container *ngIf="toLitle">
            <ngx-gridster-item *ngFor="let panel of panels" [options]="itemOptions" [dragAndDrop]="panel.dragAndDrop" [resizable]="panel.resizable" [(w)]="panel.tamanyMobil.w" [(h)]="panel.tamanyMobil.h" [(x)]="panel.tamanyMobil.x" [(y)]="panel.tamanyMobil.y" (change)="itemChange($event, panel)">
                <ng-container *ngTemplateOutlet="panelTemplate; context: {$implicit: panel}"></ng-container>
            </ngx-gridster-item>
        </ng-container>

    </ngx-gridster>

    <ng-template #panelTemplate let-panel>
        <ng-container [ngSwitch]="panel.type">

            <eda-blank-panel *ngSwitchCase="0" #edaPanel [panel]="panel" [inject]="inject" (remove)="onRemovePanel($event)" (action)="onPanelAction($event)"  (duplicate)="onDuplicatePanel($event)" >
            </eda-blank-panel>

            <eda-title-panel *ngSwitchCase="1" #edaPanel [id]="panel.id" [panel]="panel" [inject]="inject" (remove)="onRemovePanel($event)" (duplicate)="onDuplicatePanel($event)" class="eda-text-panel">
            </eda-title-panel>

        </ng-container>
    </ng-template>

</div>

<!-- ============================================================== -->
<!-- SENT VIA EMAIL PANEL -->
<!-- ============================================================== -->
<dashboard-mail-dialog *ngIf="emailController" [controller]="emailController"></dashboard-mail-dialog>

<!-- ============================================================== -->
<!-- SAVE AS PANEL -->
<!-- ============================================================== -->
<save-as-dialog *ngIf="saveasController" [controller]="saveasController"></save-as-dialog>

<!-- ============================================================== -->
<!-- URLS ACTION -->
<!-- ============================================================== -->

<urls-action *ngIf="urlsController" [controller]="urlsController"></urls-action>


<!-- ============================================================== -->
<!-- EDIT STYLES -->
<!-- ============================================================== -->
<edit-styles-dialog *ngIf="editStylesController" [controller]="editStylesController"></edit-styles-dialog>

<!-- ============================================================== -->
<!-- Right sidebar -->
<!-- ============================================================== -->
<p-sidebar [(visible)]="display_v.rightSidebar"
            position="right"
            [baseZIndex]="10000"
            blockScroll="true"
            [showCloseIcon]="false"
            [style]="{width:'25em', overflow: 'auto'}"  >

    <div>
        <div class="right-sidebar-blocks-title  mt-1">
            <span class="ml-2">{{datasourceName}}</span>
        </div>
    </div>
    <hr>

    <div *ngIf="display_v.edit_mode" class="right-sidebar-blocks-options block-options-bg pointer mt-1" (click)="onAddWidget()">
        <div>
            <i id="newPanel" class="fa fa-columns"></i>
            <span i18n="@@opcionPanel" class="ml-2">NUEVO PANEL</span>
        </div>
    </div>

    <div *ngIf="display_v.edit_mode" class="right-sidebar-blocks-options block-options-bg pointer mt-1" (click)="onAddTitle()">
        <div>
            <i class="fa fa-columns"></i>
            <span i18n="@@opcionTitulo" class="ml-2">NUEVO TEXTO</span>
        </div>
    </div>

    <div *ngIf="display_v.edit_mode" class="right-sidebar-blocks-options block-options-bg pointer mt-1" (click)="gFilter?.onShowGlobalFilter(true)">
        <div>
            <i id="newFilter" class="fa fa-filter"></i>
            <span i18n="@@opcionFiltro" class="ml-2">NUEVO FILTRO</span>
        </div>
    </div>

    <hr>

    <div class="right-sidebar-blocks-options block-options-bg pointer mt-1" (click)="onResetWidgets()">
        <div>
            <i class="fa fa-ban"></i>
            <span i18n="@@opcionInforme" class="ml-2">RECARGAR INFORME</span>
        </div>
    </div>

    <div *ngIf="display_v.edit_mode" class="right-sidebar-blocks-options block-options-bg pointer mt-1">
        <div>
            <div>
                <i class="fa fa-tag" ></i>
                <span class="ml-2"> {{addTagString}} </span>
            </div>
            <div>
                <p-multiSelect class="ml-2" [options]="tags"  [(ngModel)]="selectedTags" [placeholder]="addTagString" showHeader="false" maxSelectedLabels="0" selectedItemsLabel="Show tags"></p-multiSelect>
            </div>
            <br>
            <div>
                 <button pButton pRipple type="button" *ngIf="!addTag" class="p-button-raised p-button-success ml-2" (click)="addNewTag()" style="background-color: #4CAF50">
                    <span i18n="@@newTag"> Nueva etiqueta </span>
                 </button>
            </div>
            <input class="ml-2" *ngIf="addTag" type="text" pInputText [(ngModel)]="applyNewTag"> 
            <button pButton pRipple type="button" *ngIf="addTag" class="p-button-raised p-button-success ml-2" style="background-color: #4CAF50" (click)="setNewTag(applyNewTag)">
                <span> Confirmar </span>
            </button>
        </div>
    </div>

    <div *ngIf="display_v.edit_mode" class="right-sidebar-blocks-options block-options-bg pointer mt-1">
        <div>
            <span class="ml-2">LIVE DASHBOARD</span>
            <input style="width: 100%; margin-top: 0.2rem;" [placeholder]="Seconds_to_refresh" type="number" pInputText [(ngModel)]="refreshTime">
        </div>
    </div>


    <hr>
    <div *ngIf="display_v.edit_mode && canIedit()" class="right-sidebar-blocks-options block-options-bg pointer mt-1" (click)="saveDashboard()">
        <div>
            <i id="saveDashboard" class="fa fa-save"></i>
            <span i18n="@@opcionGuardar" class="ml-2">GUARDAR</span>
        </div>
    </div>
    <div *ngIf="display_v.edit_mode" class="right-sidebar-blocks-options block-options-bg pointer mt-1" (click)="saveAs()">
        <div>
            <i id="saveDashboard" class="fa fa-save"></i>
            <span i18n="@@opcionGuardarComo" class="ml-2">GUARDAR COMO</span>
        </div>
    </div>
    <div *ngIf="display_v.edit_mode && canIedit()" class="right-sidebar-blocks-options block-options-bg pointer mt-1" (click)="deleteReport()">
        <div>
            <i class="fa fa-trash"></i>
            <span i18n="@@eliminarInforme" class="ml-2">ELIMINAR INFORME</span>
        </div>
    </div>

    <div *ngIf="display_v.edit_mode">
        <form [formGroup]="form" *ngIf="canIedit()" >
            <div class="ml-3">
                <p-selectButton [options]="visibleTypes" formControlName="visible" (onChange)="handleSelectedBtn($event)">
                </p-selectButton>


            </div>
            <div  *ngIf="display_v.groups" class="ml-3">
                <br>
                <p-multiSelect id="float-grups" formControlName="group" [options]="grups" [filter]="true"
                 optionLabel="name" defaultLabel="Elige grupos *" [style]="{ width: '100%' }" itemSize="30" overflow="visible"
                 >
                </p-multiSelect>
            </div>
        </form>
        <button id="copy-link" (click)="copyURL()" *ngIf="display_v.shared">
            <span>
                <i class="fa fa-files-o" aria-hidden="true"></i>
                copiar URL pública
            </span>
        </button>
    </div>

    <div *ngIf="display_v.edit_mode && canIedit()"  [pTooltip]="canIeditTooltip" tooltipPosition="above" class="canIeditClass ml-3">
        <div i18n="@@onlyIcanEditTag" class="canIeditClassLabel"  >
            Edición privada:
        </div>
        <div class="canIeditClassLabel"  [pTooltip]="canIeditTooltip" tooltipPosition="above"  >
            <p-inputSwitch id="onlyIcanEdit" class="col-1 sql-switch" [(ngModel)]="onlyIcanEdit"
            tooltipPosition="top"   >
            </p-inputSwitch>
        </div>
    </div>
    
    <hr>
    <div *ngIf="display_v.edit_mode" class="right-sidebar-blocks-options block-options-bg pointer mt-1" (click)="editStyles()">
        <div>
            <i class="fa fa-paint-brush"></i>
            <span i18n="@@opcionEditarEstilos" class="ml-2">EDITAR ESTILOS</span>
        </div>
    </div>

    <div class="right-sidebar-blocks-options block-options-bg pointer mt-1" (click)="exportAsPDF();">
        <div>
            <i class="fa fa-download"></i>
            <span i18n="@@opcionPdf" class="ml-2">DESCARGAR PDF</span>
        </div>
    </div>

    <div class="right-sidebar-blocks-options block-options-bg pointer mt-1" (click)="exportAsJPEG();">
        <div>
            <i class="fa fa-download"></i>
            <span i18n="@@opcionImagen" class="ml-2">DESCARGAR IMAGEN</span>
        </div>
    </div>

    <div  *ngIf="display_v.edit_mode && canIedit()" class="right-sidebar-blocks-options block-options-bg pointer mt-1" (click)="openMailConfig();">
        <div>
            <i class="fa fa-envelope-o"></i>
            <span i18n="@@opcionMail" class="ml-2">ENVIAR POR EMAIL</span>
        </div>
    </div>

    <div  class="right-sidebar-blocks-options block-options-bg pointer mt-1" (click)="openUrlsConfig();">
        <div>
            <i class="fa fa-link"></i>
            <span i18n="@@opcionUrls" class="ml-2">ACCIÓN PERSONALIZADA</span>
        </div>
    </div>



</p-sidebar>

<div>
    <span i18n="@@notSavedChanges" class="div-cambios " *ngIf="display_v.notSaved" style="color: var(--panel-font-color);"> Hay cambios sin guardar... </span>

    <button *ngIf="!display_v.hideWheel" (click)="display_v.rightSidebar = true" class="right-side-toggle waves-effect waves-light btn-inverse btn btn-circle btn-sm pull-right m-l-10">
        <i id="gearButton" class="fa fa-cog text-white" style="font-size: 14px;"></i>
    </button>

</div>


<div  *ngIf="display_v.panelMode" >
  <a href="https://eda.jortilles.com/">Enterprise Data Analytics</a>
</div>
